<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>SSM form </title>
	<link rel="stylesheet" href="css/cupertino/jquery-ui-1.10.3.custom.min.css">
	<link rel="stylesheet" href="css/ui.jqgrid.css">
	<link rel="stylesheet" href="js/plugins/ui.multiselect.css">
	<link rel="stylesheet" href="js/plugins/searchFilter.css">
	
	
	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
	<script type="text/javascript" src="js/grid.locale-cn.js"></script>
    <script type="text/javascript" src="js/plugins/grid.addons.js"></script>
    <script type="text/javascript" src="js/plugins/grid.postext.js"></script>
    <script type="text/javascript" src="js/plugins/grid.setcolumns.js"></script>
    <script type="text/javascript" src="js/plugins/jquery.contextmenu.js"></script>
    <script type="text/javascript" src="js/plugins/jquery.searchFilter.js"></script>
    <script type="text/javascript" src="js/plugins/jquery.tablednd.js"></script>
    <script type="text/javascript" src="js/plugins/ui.multiselect.js"></script>
    
    
	<script type="text/javascript" src="dwr/util.js"></script>
    <script type="text/javascript" src="dwr/engine.js"></script>
    <script type="text/javascript" src="dwr/interface/userService.js"></script>
    
    
    
	<script type="text/javascript" src="js/form.jqUI.js"></script>
	<style>
		body { font-size: 62.5%; }
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#users-contain { width: 350px; margin: 20px 0; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
	</style>
</head>
<body>

<div id="dialog-form" title="Create new user">
	<p class="validateTips">All form fields are required.</p>

	<form id="userForm">
	<fieldset>
		<label for="user.id">ID</label>
		<s:textfield name="user.id" id="user.id" cssClass="text ui-widget-content ui-corner-all" />
		<label for="user.name">name</label>
		<s:textfield name="user.name" id="user.name" cssClass="text ui-widget-content ui-corner-all" />
		<label for="user.birthday">birthday</label>
		<s:textfield name="user.birthday" id="user.birthday" cssClass="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
</div>


<div id="users-contain" class="ui-widget">
	<h1>Existing Users:</h1>
	<table id="users" class="ui-widget ui-widget-content">
		<thead>
			<tr class="ui-widget-header ">
				<th>ID</th>
				<th>name</th>
				<th>birthday</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>10001</td>
				<td>testName</td>
				<td>2013-12-27</td>
			</tr>
		</tbody>
	</table>
</div>
<button id="create-user">Create new user</button>

<div class="demo-description">
<p>Use a modal dialog to require that the user enter data during a multi-step process.  Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
</div>
</body>
</html>
